<template>
  <div class="dashboard-container body-min-width">
    <h2 class="head-big-title">Kedai
      <div style="float: right;margin-right: 7%;cursor: pointer;" @click="$router.push({path:'/Shop/Shopping-Cart'})">
        <svg-icon v-if="shopCart.length > 0" icon-class="gouwucheman" style="font-size: 24px;margin-right: 10px;position: relative;bottom: 5px" />
        <svg-icon v-else icon-class="gouwuchekong" style="font-size: 24px;margin-right: 10px;position: relative;bottom: 5px" />
        <p style="display: inline-block;font-size: 14px;"><span>{{ $formatMoneyStr(shopCart.total) }}</span><span style="display: block;">{{ shopCart.length }} barang</span></p>
      </div>
      <el-input
        placeholder="Search"
        v-model="searchData.productName"
        @blur="getResetLoadData"
        @input="changeNew($event)"
        prefix-icon="el-icon-search"
        style="float: right;margin-right: 30px;width: 188px;"></el-input>
    </h2>
    <Pathnavigation style="margin-left: 3%;"></Pathnavigation>
    <div style="width: 92%;height: 66px;margin: 20px 4% 0 4%;padding: 10px 0 0 20px;border-radius: 10px;background-color: white;">
      <el-form
        label-width="120px"
        :inline="true"
        class="head-search"
        :model="searchData"
        style="float: right;text-align: left;">
        <el-form-item label="aturan susunan" width="166">
          <el-select v-model="searchData.sort" class="input-width" placeholder="Sort" @change="getResetLoadData">
            <el-option label="Semua" value=""></el-option>
            <el-option label="Bawah ke tinggi" :value="0"></el-option>
            <el-option label="Tinggi ke bawah" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Tunjuk" width="166">
          <el-select v-model="searchData.pageNum" class="input-width" @change="getResetLoadData">
            <el-option label="12/halaman" :value="12"></el-option>
            <el-option label="24/halaman" :value="24"></el-option>
            <el-option label="36/halaman" :value="36"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div style="width: 94.5%;margin: 20px 1.5% 0 4%;border-radius: 10px;">
      <div style="width: 16%;margin-right: 4%;background-color: white;border-radius: 10px;display: inline-block;">
        <ul style="list-style-type:none;width: 16%;background-color: white;margin: 0;padding: 0;line-height: 36px;font-size: 14px;position: absolute;top: 320px;" class="choose-ul">
          <li @click="changeType(0)" :class="[{active:categoryId == 0}]">Semua</li>
          <li v-for="(item,index) in categoryList" :key="index" :class="[{active:categoryId == item.categoryId}]" @click="changeType(item.categoryId)">{{ item.categoryName }}</li>
        </ul>
      </div>
      <div v-if="tableData.length && tableData.length > 0" style="width: 80%;display: inline-block;">
        <div
          v-for="(item,index) in tableData"
          :key="index"
          style="width: 23%;height: 266px;margin-right: 2%;float: left;margin-bottom: 20px;padding-top:10px;">
          <el-image
            style="width: 250px;height: 250px;cursor: pointer;padding-top:10px;"
            :src="picbase + item.picUrl"
            @click="showDetail(item)">
            <div slot="placeholder" class="image-slot">
              <i class="el-icon-loading" style="font-size: 72px;line-height: 188px;" />
            </div>
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" style="font-size: 72px;line-height: 188px;" @click="showDetail(item)" />
            </div>
          </el-image>
          <el-tooltip class="item" effect="light" :open-delay="366" :content="item.productName" placement="top">
            <p style="width: 100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{ item.productName }}</p>
          </el-tooltip>
          <p v-show="role == dealerMValue" style="margin-bottom: 10px;">
            {{ $formatMoneyStr(item.price*item.productSku.exchangeNum)}}
          </p>
          <p v-show="role == dealerValue" style="margin-bottom: 10px;">{{ $formatMoneyStr(item.price) }}</p>
        </div>
      </div>
      <div v-else style="width: 80%;display: inline-block;">
        <strong style="line-height: 288px;font-size: 24px;">Tiada Produk</strong>
      </div>
    </div>
    <el-pagination
      style="float: right;clear: both;margin: 30px 3% 20px 0;"
      layout="prev, pager, next"
      :current-page="searchData.pageIndex"
      :page-size="searchData.pageNum"
      :total="totalCount"
      @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { queryShopProductApi, queryShopCategoryApi } from '@/api/user'

export default {
  name: 'Activityrecord',
  computed: {
    ...mapGetters([
      'name',
      'role',
      'shopCart'
    ])
  },
  data() {
    return {
      tableData: [],
      categoryList: [],
      searchData: {
        sort: 0,
        pageIndex: 1,
        pageNum: 12
      },
      orderChart: '',
      totalCount: 0,
      currentPage: 1,
      categoryId: 0
    }
  },
  created() {
    if (this.$route.params.id) {
      this.searchData.productName = this.$route.params.id
    }
    this.$removeDetail()
    this.$store.commit('user/SET_SHOPCART')
    this.getProductTypeList()
  },
  mounted() {
  },
  methods: {
    changeType(id) {
      this.categoryId = id
      this.searchData.pageIndex = 1
      this.getLoadData()
    },
    getResetLoadData() {
      this.searchData.pageIndex = 1
      this.getLoadData()
    },
    handleCurrentChange(val) {
      this.searchData.pageIndex = val
      this.getLoadData()
    },
    getProductTypeList() {
      const requestData = {
        state: '0',
        pageNum: 100,
        pageIndex: 1
      }
      queryShopCategoryApi(requestData).then(res => {
        this.categoryList = res.data.records
      }).catch(err => {
        this.tableData = []
        console.log(err)
      })
      this.getLoadData()
    },
    getLoadData() {
      const requestData = this.searchData
      requestData.categoryId = this.categoryId
      if (this.role == this.dealerMValue) {
        requestData.order = 'price_master_dealer'
      }
      if (this.role == this.dealerValue) {
        requestData.order = 'price_dealer'
      }
      if (requestData.categoryId == 0) {
        delete requestData.categoryId
      }
      if (requestData.sort == '') {
        delete requestData.sortType
      }
      if (requestData.productName == '') {
        delete requestData.productName
      }
      queryShopProductApi(requestData).then(res => {
        this.tableData = res.data.records
        this.totalCount = res.data.total
      }).catch(err => {
        this.tableData = []
        console.log(err)
      })
    },
    changeNew() {
      this.$forceUpdate()
    },
    showDetail(item) {
      this.$router.push('/Shop/detail/' + item.id)
    },
    toPage() {
      this.$router.push({ path: '/Shop/detail' })
    }
  }
}
</script>

<style lang="scss" scoped>
  .head-big-title{
    text-align: left;
    font-size: 20px;
    margin: 20px 0 50px 3%;
  }
  .dashboard-container{
    margin-top: 20px;
    text-align: center;
  }

</style>
<style scoped>
  /deep/.head-search label{
    line-height: 30px;
  }
  .choose-ul li{
    text-align: left;
    padding-left: 26px;
    color: black;
  }
  .choose-ul li.active{
    background-color: #2b2f3a;
    color: rgb(221, 184, 124);
  }
  .choose-ul li + li {
    border: 2px solid rgb(244,245,245);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .produce-img-ul{
    list-style-type:none;
    margin: 0;
    padding: 0;
  }
  .produce-img-ul li{
    display: inline-block;
    border: 2px solid #1482f0;
    margin-right: 2.5%;
    float: left;
  }
</style>
